<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
require_once 'templates/header.php';
?>
<title>Welcome to WongLounge</title>
<link type="text/css" rel="stylesheet" href="<?= base_url('asset/css/review.css') ?>" />
<script type="text/javascript" src="<?= base_url('asset/js/ckeditor/ckeditor.js') ?>"></script>
<script type="text/javascript" src="<?= base_url('asset/js/ckeditor/adapters/jquery.js') ?>"></script>
<script type="text/javascript" src="<?= base_url('asset/jquery-ui-themes-1.11.2/jquery-ui-1.11.2.js') ?>"></script>
<script type="text/javascript">
    $(function () {
        var reviewWidth = $(window).width() - 150;
        var height = $(window).height() - 250;
        $(".review-box").width(reviewWidth);
        $(".item-box").height(height);
        $(".review-box").height(height);
        $(".review-box").find("textarea").css("max-width", reviewWidth);
        $(".review-box").find("textarea").css("min-width", reviewWidth);
        $(".review-box").find("textarea").css("max-height", height - 40);
        $(".review-box").find("textarea").css("min-height", height - 40);

        var editor = CKEDITOR.replace("editor1", {
            on: {
                // maximize the editor on startup
                'instanceReady': function (evt) {
                    evt.editor.resize(reviewWidth, height);
                }
            },
            toolbar: [
                {name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt']},
                {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
                {name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']},
                '/',
                {name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize']},
                {name: 'colors', items: ['TextColor', 'BGColor']},
                {name: 'tools', items: ['Maximize', 'ShowBlocks']},
                '/',
                {name: 'links', items: ['Link', 'Unlink']},
                {name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak']}
            ]
        });

        $(".item-box").hover(
                function () {
                    $(this).animate({width: '100'}, 250);
                    $(".editor-menu").css("display", "block");
                },
                function () {
                    $(this).animate({width: '20'}, 250);
                    $(".editor-menu").css("display", "none");
                }
        );

//        $('#editor1').ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
//        $('#editable').ckeditor(); // Use CKEDITOR.inline().

    });
</script>
<?php
require_once 'templates/header-content.php';
?>
<body>
    <?= require_once 'templates/menu.php'; ?>
    <div class="contrianer">
        <div class="item-box">
            <div id="expand">E</div>
            <div class="editor-menu">
                <li>Editable</li>
                <li>Images</li>
                <li>Places</li>
                <li>asd</li>
            </div>
        </div>
        <div class="review-box">
            <textarea id="editor1" name="editor1"></textarea>
        </div>
    </div>
    <div style="clear:both; border-top: 1px solid #999;"></div>
</body>
<?php
require_once 'templates/footer.php';
